<script setup>
import { ref } from 'vue'
import {
  BaiduMap,
  BmNavigation,
  BmScale,
  BmOverviewMap,
  BmMarker
} from 'vue-baidu-map-3x'
import { Plus } from '@element-plus/icons-vue'
import { postPublishServer } from '@/api/postList'
import { useRouter } from 'vue-router'

const router = useRouter()

const articleFormRef = ref()
const articleForm = ref({
  title: '',
  content: '',
  img: '',
  longitude: 113.3927623,
  latitude: 23.0490922
})

// 发布帖子
const postPublish = async (data) => {
  await postPublishServer(data)
}

// 验证规则
const rules = ref({
  title: [{ required: true, message: '请填写标题', trigger: 'blur' }],
  content: [{ required: true, message: '请填写内容', trigger: 'blur' }],
  img: [{ required: true, message: '请上传图片', trigger: 'blur' }]
})

// 发布文章
const onSubmit = async (form) => {
  await form.validate(async (valid) => {
    if (valid) {
      await postPublish(articleForm.value)

      // clearForm()
      ElMessage({
        message: '操作成功',
        type: 'success'
      })
      router.push('/')
    } else {
      ElMessage.error('操作失败')
    }
  })
}

const clearForm = () => {
  articleForm.value = {
    title: '',
    content: '',
    img: '',
    longitude: 113.3927623,
    latitude: 23.0490922
  }
}

const getLngLat = (e) => {
  articleForm.value.longitude = e.point.lng
  articleForm.value.latitude = e.point.lat
  console.log(articleForm.value)
}
const lnglat = ref({ lng: 113.3927623, lat: 23.0490922 })

// 获取图片
const imgGet = async (e) => {
  imageUrl.value = URL.createObjectURL(e.raw)
  articleForm.value.img = e.raw
}

const imageUrl = ref('')
</script>

<template>
  <page-container title="发布职位" style="position: relative">
    <template #extra>
      <el-button type="primary" @click="clearForm"> 清空 </el-button>
    </template>
    <el-form
      style="padding: 0 50px 0 50px; width: 1200px; margin: auto"
      ref="articleFormRef"
      :rules="rules"
      label-position="top"
      :model="articleForm"
      inline
    >
      <el-form-item label="文件封面" prop="img" style="width: 320px">
        <el-upload
          ref="upload2"
          class="avatar-uploader"
          action="#"
          :auto-upload="false"
          :on-change="imgGet"
          :on-success="handleAvatarSuccess"
          :show-file-list="false"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>

      <div class="flex">
        <el-form-item label="标题：" prop="title">
          <el-input v-model="articleForm.title" placeholder="请填写标题" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input
            v-model="articleForm.content"
            placeholder="请填写内容"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 4 }"
          />
        </el-form-item>
      </div>

      <el-form-item
        label="定位（请拖拽定位点）："
        prop="longitude"
        style="margin-right: 0px; width: 1200px"
      >
        <div class="map">
          <baidu-map
            class="map"
            ak="ODp6X9Pb9W0kffbhOylM1gFP9BuXRLok"
            v="3.0"
            type="API"
            :center="{ lng: 113.3927623, lat: 23.0490922 }"
            :zoom="18"
            :scroll-wheel-zoom="true"
          >
            <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
            <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
            <bm-overview-map
              anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
              :isOpen="true"
            ></bm-overview-map>
            <bm-marker
              @dragend="getLngLat"
              :dragging="true"
              :position="lnglat"
            ></bm-marker>
          </baidu-map>
        </div>
      </el-form-item>
      <el-form-item style="margin-top: 20px; width: 1200px">
        <el-button type="primary" @click="onSubmit(articleFormRef)">
          发布帖子
        </el-button>
      </el-form-item>
    </el-form>
  </page-container>
</template>

<style lang="scss" scoped>
.map {
  width: calc(50vw);
  margin: auto;
  aspect-ratio: 16/9;
}
.flex {
  width: calc(1200px - 352px);
  display: flex;
  flex-direction: column;
}
.el-icon.avatar-uploader-icon,
.avatar {
  width: 320px;
  height: 180px;
}
</style>
